<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>子组件想要修改父组件传来的值</p>
        <p>当前的数据：{{num}}</p>
        <button @click="num ++">add</button>
        <p>{{arr}}</p>
        <hr>
        <son1 :num="num" :list="arr"></son1>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                num: 20,
                arr: [1,2,3,4]
            },
            methods: {
                
            },
            components: {
                'son1': {
                    template: `<div>
                        <p>{{list}}</p>
                        <button @click="changeArr">修改数组</button>
                        <br>
                        {{myNum}}===<button @click="myNum ++">add</button>
                        </div>`,
                    props: ['num', 'list'],
                    data() {
                        // 确实需要修改父组件的数据时，可以声明一个新的变量，接受props中的父组件数据，然后修改自己的值
                        return {
                            myNum: this.num
                        }
                    },
                    methods: {
                        changeArr() { // 如果父组件传过来的是一个引用数据类型 那么是可以修改的，也不会报错。因为指向了同一个数据
                            this.list.push(5)
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>